<template>
    <div style="background-color: #fff;">
        <main-layout>
            <div class="plantDetailBox" style="width:1400px;">
                <div class="topBtnBox">
                    <el-button v-if="details.status=='UN_CONFIRM'" type="primary" class="myBtn" @click="confirm">批量确认</el-button>
                    <el-button type="info" plain class="myBtn" @click="close">返回</el-button>
                </div>
                <el-tabs v-model="activeName" class="demo-tabs">
                    <el-tab-pane label="详情" name="1">
                        <plant-detail :stages="stages" :details="details" v-if="activeName==1" :fn="get_plant_detail"/>
                    </el-tab-pane>
                    <el-tab-pane label="日志" name="2">
                        <plant-log v-if="activeName==2"/>
                    </el-tab-pane>
                  </el-tabs>
            </div>
        </main-layout>
    </div>
</template>

<script setup>
import {ref,onMounted} from "vue"
import mainLayout from '@/components/custom/mainLayout.vue'
import plantDetail from './components/plantDetail.vue'
import plantLog from './components/plantLog.vue'
import{useRouter,useRoute} from "vue-router"
import { useUserStore } from '@/pinia/modules/user'
import {getPlantDetail,getStageList,get_plant_batch_confirm} from '@/api/plant'
import { emitter } from '@/utils/bus.js'
import { ElMessageBox } from 'element-plus'
import {message} from '@/utils/element'

const router = useRouter()
const route = useRouter()
const userStore = useUserStore()

const plantHeaderId = ref('')
const details = ref({})
const activeName = ref('1')
const stages = ref([])

onMounted(async ()=>{
    plantHeaderId.value = route.currentRoute.value.query.plantHeaderId

    // 获取种植阶段
    const res = await getStageList({page: 1, limit: 100})
    if(res.code ==0 || res.success){
        stages.value = res.data
    }
    
    // 种植计划详情
    get_plant_detail()

})
const get_plant_detail = ()=>{
    getPlantDetail(plantHeaderId.value).then(async res =>{
        details.value = res.data
    })
}
const close = ()=>{
    emitter.emit('closeThisPage')
}
const confirm = ()=>{
    ElMessageBox.confirm('确认计划吗？确认计划后系统生成农事！','提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        const res = await get_plant_batch_confirm({plantHeaderId:plantHeaderId.value})
        if(res.code ==0 || res.success){
            message('操作成功',2)
            get_plant_detail()
        }else{
          message(res.message || '出错了',3)
        }
    })
}

</script>

<style lang="scss" scoped>
.plantDetailBox{
    position: relative;
    z-index: 10;
    margin: -20px 0 0 0;
    .topBtnBox{
        position: absolute;
        z-index: 10;
        top: 0;
        right: 0;
    }
}
</style>